<template>
    <el-card shadow="never">

        <div class="title-pending">
            <div class="long-string"></div>
            <span>待处理服务</span>
        </div>

        <el-form :model="formItem" style="margin-top: 20px;">
            <el-row class="row-item">

                <el-form-item class="form-data" label="签约状态">
                    <el-select v-model="formItem.state" placeholder="请选择" clearable>
                        <el-option label="待审核" value="1" />
                        <el-option label="待支付" value="2" />
                        <el-option label="已驳回" value="0" />
                    </el-select>
                </el-form-item>

                <el-form-item class="form-data" label="签约管理">
                    <el-select v-model="formItem.organization" placeholder="请选择" clearable
                        style="width: 200px; height: 40px;">
                        <el-option v-for="item in ClorganizationsData" :key="item._id" :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item>

                <el-form-item class="form-data" label="医生团队">
                    <el-select v-model="formItem.doctor" placeholder="请选择" clearable
                        style="width: 200px; height: 40px;">
                        <el-option v-for="item in TeamsData" :key="item._id" :label="item.name" :value="item.name" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="$router.push('/admin/serve/Redacts')"
                        style="height: 40px;">新增服务</el-button>
                    <el-button class="educe">导出</el-button>
                </el-form-item>

            </el-row>

            <el-row class="row-item">

                <el-form-item class=" form-data" label="服务包">
                    <el-select v-model="formItem.serve" placeholder="请选择" clearable style="width: 200px; height: 40px;">
                        <el-option v-for="(item, index) in ServeData.filter(item => item.type)" :key="item._id"
                            :label="item.type" :value="item.type" />
                    </el-select>
                </el-form-item>

                <el-form-item class=" form-data" label="选择日期">
                    <el-date-picker v-model="formItem.data" type="daterange" start-placeholder="请选择日期"
                        end-placeholder="请选择日期" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime"
                        style="width: 360px;height: 40px;" />
                </el-form-item>


                <el-form-item class="form-data">
                    <el-input v-model="formItem.word" placeholder="请输入关键字" class="input-with-select"
                        style="width: 376px;height: 40px;" @keyup.emter="onSearch">
                        <template #prefix>
                            <el-icon @click="onSearch">
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

            </el-row>
        </el-form>

        <div class="el-card-list">

            <el-table :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e' }"
                width="100%" :fit="true" :data="tableData.rows">

                <el-table-column type="selection" width="30" />

                <el-table-column prop="_id" label="编号" min-width="100" />

                <el-table-column prop="residentId.name" label="签约人姓名" min-width="80" />

                <el-table-column prop="residentId.birthday" label="生日" min-width="150" />

                <el-table-column prop="residentId.phone" label="手机号码" />

                <!-- <el-table-column prop="state" label="签约状态" /> -->
                <el-table-column label="签约状态">
                    <template #default="scope">
                        <span :style="{ color: getStateColor(scope.row.residentId?.state) }">
                            {{ getStateText(scope.row.residentId?.state) }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="doctorId.name" label="签约医生团队" />

                <el-table-column prop="servicePackId.type" label="签约服务包" />

                <el-table-column prop="time" label="最后修改时间" />

                <el-table-column label="操作" width="180">
                    <!-- scope.row获取到当前这一行的数据对象 -->
                    <template #default="scope">

                        <el-space>
                            <router-link style="font-weight: 400;font-size: 13px;color: #2984F8; text-decoration:none;"
                                :to="{ path: '/admin/serve/Searchsons', query: { _id: scope.row._id } }">查看详情</router-link>
                            <router-link style="font-weight: 400;font-size: 13px;color: #2984F8; text-decoration:none;"
                                :to="{ path: '/admin/serve/Redacts', query: { _id: scope.row._id } }">编辑</router-link>
                        </el-space>
                    </template>
                </el-table-column>
            </el-table>


            <div class="flex-end">
                <div class="pagination-wra">
                    <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                        :page-sizes="[10, 20, 40, 100]" :total="tableData.total" @current-change="handlePageChange"
                        @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" />
                </div>
            </div>
        </div>

    </el-card>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'

// 引入封装的请求api方法
import { searchSignApi } from '../../../api/pending';
import { searchChorganizationsApi } from '../../../api/organization';
import { searchTeamsApi } from '../../../api/teams';
import { findServeApi } from '../../../api/serve';
import { searchServeApi } from '../../../api/serve'

const formItem = reactive({
    state: '',
    organization: '',
    doctor: '',
    serve: '',
    data: [],
    word: ''
})


const defaultTime = ref([
    '00:00:00',
    '23:59:59'])
// 表格数据
const tableData = reactive({
    rows: [],
    total: 0
});

// 分页数据
const pageData = ref({ currentPage: 1, pageSize: 10 })



//机构数据保存
const ClorganizationsData = ref([]);

//团队数据保存
const TeamsData = ref([]);

//服务包数据保存
const ServeData = ref([]);

//服务详情数据保存
const ServelistData = ref([]);

onMounted(() => {
    // findUserSign();
    findUserClorganizations();
    findTeams();
    findServe();
    Servelist()
})
//查询服务数据列表
async function Servelist() {
    // 调用请求api，发送请求
    const res = await searchServeApi({
        currentPage: pageData.value.currentPage,
        pageSize: pageData.value.pageSize
    });
    if (res.code == 200) {
        ServelistData.value = res.data.rows;
        console.log('服务列表数据详情', res.data.rows);
        tableData.rows = res.data.rows;
        tableData.total = res.data.total;
    }
}

// //查询签约
// async function findUserSign() {
//     // 调用请求api，发送请求
//     const res = await searchSignApi({
//         currentPage: pageData.value.currentPage,
//         pageSize: pageData.value.pageSize
//     });
//     if (res.code == 200) {
//         searchData.value = res.data.rows;
//         tableData.rows = res.data.rows;
//         tableData.total = res.data.total;

//     }
// }

//获取机构
async function findUserClorganizations() {
    // 调用请求api，发送请求
    const res = await searchChorganizationsApi({
        currentPage: 1,
        pageSize: 10,
    });
    if (res.code == 200) {
        ClorganizationsData.value = res.data.rows;
    }
}

//查询团队
async function findTeams() {
    // 调用请求api，发送请求
    const res = await searchTeamsApi();
    if (res.code == 200) {
        TeamsData.value = res.data.rows;
    }
}

//查询服务包
async function findServe() {
    // 调用请求api，发送请求
    const res = await findServeApi();
    if (res.code == 200) {
        ServeData.value = res.data;
        // console.log('服务包类型数据', res);

    }
}


/**
 * 执行搜索操作
 * 重置页码为1并刷新表格
 */
function onSearch() {
    // findUserGrade();
}

//页码变化时
function handlePageChange(currentPage) {
    pageData.currentPage = currentPage;
    Servelist()
}


//每条页码变化时
function handleSizeChange(pageSize) {
    pageData.pageSize = pageSize;
    pageData.currentPage = 1;
    Servelist()
}

//根据状态值返回对应的颜色
const getStateColor = (state) => {
    switch (state) {
        case 0: return '#F5222D'; // 已驳回（红色）
        case 1: return '#1890FF'; // 待审核（蓝色）
        case 2: return '#FAAD14'; // 待支付（橙色）
        case 3: return '#52C41A'; // 已签约（绿色）
        case 4: return '#8C8C8C'; // 待续约（灰色）
        default: return '#333333'; // 默认颜色（深灰色）
    }
}

//根据状态值返回文字
const getStateText = (state) => {
    const stateMap = {
        0: '已驳回',
        1: '待审核',
        2: '待支付',
        3: '已签约',
        4: '待续约'
    };
    return stateMap[state] || '未知状态'
}

</script>

<style scoped>
:deep(.el-pagination .btn-prev) {
    margin-left: 100px;
}

.flex-end {
    margin-top: 20px;
    padding: 0 16px;
}

.pagination-wra {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}



.el-table .cell {
    text-align: center;
}



.form-data {
    display: flex;
    align-items: center;
}

.el-form-item {
    margin-bottom: 0;


}

.row-item .el-form-item:not(:last-child) {
    margin-right: 30px;
}

:deep(.el-select__wrapper) {
    width: 200px;
    height: 40px;
}

.row-item {
    display: flex;
    align-items: center;
}

:deep(.el-form-item__label) {
    width: 68px;
    height: 32px;
}



.title-pending {
    display: flex;
    align-items: center;
}

.long-string {
    width: 6px;
    height: 20px;
    background-color: rgba(41, 132, 248, 1);
    border-radius: 8px;
}

.title-pending>span {
    font-weight: 500;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.898039215686275);
    margin-left: 10px;
}


.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.educe {
    width: 64px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.0980392156862745);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(24, 119, 242, 1);
    border-radius: 4px;
    font-weight: 400;
    color: #1877F2;


}

.educe:hover {
    color: #1877F2;
}


.el-card-list {
    margin-top: 30px;
}
</style>
